<template>
    <div>
        <div class="d-f d-ai-center d-jc-between mt-5 d-f-w">
            <echarts class="mx-5" :options = "optionsfirst"></echarts>
            <echarts class="mx-5" :width="800" :options = "optionsline"></echarts>
        </div>
        <div class="d-f d-ai-center d-jc-center"><echarts :width="1200" :height="400" :options = "optionstree"></echarts></div>
    </div>
    
    
</template>

<script lang="ts">
import echarts from '@/components/echarts.vue'
import { Vue,Component  } from 'vue-property-decorator'
@Component({
    name:"",
    components:{
        echarts
    }
})
export default class extends Vue{
    optionsfirst = {
        title:{
            text:'饼图', //标题
            subtext: '联系模拟',  //副标题
            x:'center'  // 位置
        },
        toolbox:{
            feature:{
                 //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
                dataView:{
                    show:true,  //是否显示 数据示图
                    readOnly:false, //是否 直接可以编辑数据。
                },
                //保存为图片的配置
                saveAsImage: {
                    show: true
                },
                //配置项还原
                restore: {show: true},
            }
        },
        legend: {
            orient: 'vertical', //图例列表的布局朝向。
            left: 'left', //距离左侧的距离
            itemwidth:'2',
            data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        },
        series : [
            {
                name: '访问来源',
                type: 'pie', //类型
                radius : '60%', //饼图的半径
                center: ['50%', '60%'], //饼图位置的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
                data:[
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                    {value:234, name:'联盟广告'},
                    {value:135, name:'视频广告'},
                    {value:1548, name:'搜索引擎'}
                ],
            }
        ]
    }

    optionsline = {
        legend: {},
        tooltip: {
            trigger: 'axis',
            showContent: false
        },
        toolbox:{
            feature:{
                // 动态类型切换,切换图表
                magicType: {
                    type: ['line', 'bar']
                },
                //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
                dataView:{
                    show:true,  //是否显示 数据示图
                    readOnly:false, //是否 直接可以编辑数据。
                },
                //保存为图片的配置
                saveAsImage: {
                    show: true
                },
                //配置项还原
                restore: {show: true},
            }
        },
        dataset: {
            source: [
                ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
                ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
                ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
                ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
            ]
        },
        xAxis: {type: 'category'},
        yAxis: {gridIndex: 0},
        grid: {top: '55%'},
        series: [
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            {
                type: 'pie',
                id: 'pie',
                radius: '30%',
                center: ['50%', '25%'],
                label: {
                    formatter: '{b}: {@2012} ({d}%)'
                },
                encode: {
                    itemName: 'product',
                    value: '2012',
                    tooltip: '2012'
                }
            }
        ]
    };

    optionstree = {
            title:{
                text:'折线趋势图', //标题
                subtext: '联系模拟',  //副标题
                x:'left'  // 位置
            },
             grid: { //图表绘制与上下左右的距离
                left: '5%',
                right: '5%',
                bottom: '10%',
             },
             tooltip: {
                trigger: 'axis',
                formatter: function(params) {
                    return "日期：" + params[0].name + ":00<br/>" +
                         "资产原值：" + params[0].value + "Km/h<br/>";
                },
                axisPointer: {
                    type: 'line',
                    lineStyle: {
                        color: "#5793f3",
                        width: 2,
                        type: 'dashed'
                    }
                },
                backgroundColor: 'rgba(16,75,136,.5)',
                borderColor: "rgba(50,243,255,1)",
                borderWidth: 1,
            },
            xAxis: {//x轴
                 min:0, // 设置x轴刻度的最小值
                type: 'category',
                boundaryGap: false,
                data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
                axisLine:{//坐标轴线
                        show:true,
                        lineStyle:{
                            color:'rgba(29, 32, 136, 1)'
                        }
                   },
                 axisTick:{//坐标轴线是否向内
                     inside:false,
 
                     lineStyle:{
                        color:'rgba(0, 160, 233, 1)'
                     }
               },
               axisLabel:{//坐标轴刻度设置
                color:'rgba(40, 40, 40, 1)'
               },
 
            },
            toolbox:{
                feature:{
                    // 动态类型切换,切换图表
                    magicType: {
                        type: ['line', 'bar']
                    },
                    //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
                    dataView:{
                        show:true,  //是否显示 数据示图
                        readOnly:false, //是否 直接可以编辑数据。
                    },
                    //保存为图片的配置
                    saveAsImage: {
                        show: true
                    },
                    //配置项还原
                    restore: {show: true},
                }
            },
            yAxis: {
                min:0, // 设置y轴刻度的最小值
                type: 'value',
                axisLine:{
                   show:true,
                   lineStyle:{
                   color:'rgba(0, 160, 233, 1)'
                 }
               },
               axisTick:{//坐标轴线是否向内
                 inside:true,
                 lineStyle:{
                    color:'rgba(0, 160, 233, 1)'
                 }
 
               },
                axisLabel:{//坐标轴刻度设置
                color:'rgba(40, 40, 40, 1)'
               },
                splitLine:{show: false},//去除网格线
 
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth:false,//是否平滑曲线显示。
                symbol: 'circle',//标记的图形。
                symbolSize: 4,//标记的大小
                itemStyle: {//图像标记颜色 修改颜色时symbol、symbolSize需要进行设置
                    normal: {
                        color: 'rgba(0, 192, 255, 1)',
                        borderColor: 'rgba(29,32,136,1)',
                        borderWidth: 1,
                        borderType: 'solid',
                        shadowColor: 'rgba(29,32,136,1)',
                        shadowBlur: 4,
                    },
                 },
                lineStyle:{//折线线条颜色
                    normal:{
                        color:'rgba(29, 32, 136, 1)'
                    }
                },
                areaStyle: {//图表覆盖颜色设置
                 normal: {
                   borderColor: 'rgba(29,32,136,1)',
                     color:{
                          type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: 'rgba(22, 192, 222, 1)' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'rgba(0, 192, 255, 1)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                     }
 
                }
                }
            }]
        }
}
</script>